<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑贷款' : '新增贷款'"
    style="width: 500px"
  >
    <el-form ref="formRef" :model="loanForm" label-width="120px" :rules="rules">
      <el-form-item label="贷款产品" prop="productName">
        <el-input
          v-model="loanForm.productName"
          clearable
          placeholder="请输入贷款产品"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="customerName">
        <el-input
          v-model="loanForm.customerName"
          clearable
          placeholder="请输入客户名称"
        />
      </el-form-item>
      <el-form-item label="贷款金额(元)" prop="loanAmount">
        <el-input-number
          v-model="loanForm.loanAmount"
          :min="0"
          :precision="2"
          style="width: 100%"
          clearable
        />
      </el-form-item>
      <el-form-item label="贷款开始日期" prop="startTime">
        <el-date-picker
          v-model="loanForm.startTime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
          clearable
        />
      </el-form-item>
      <el-form-item label="贷款结束日期" prop="endTime">
        <el-date-picker
          v-model="loanForm.endTime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
          clearable
        />
      </el-form-item>
      <el-form-item label="贷款状态" prop="status">
        <el-select
          v-model="loanForm.status"
          placeholder="请选择贷款状态"
          clearable
        >
          <el-option
            v-for="status in statusTypeMap"
            :key="status"
            :label="status"
            :value="status"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#19af7d" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, computed, watch, ref } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";

// 定义表单数据类型
type LoanForm = {
  id: number | null;
  productName: string;
  customerName: string;
  loanAmount: number;
  unpaidAmount: number;
  startTime: string;
  endTime: string;
  status: string;
  overdueDays: number;
  unpaidInterest: number;
};

const props = defineProps<{
  modelValue: boolean;
  isEdit: boolean;
  formData: LoanForm;
}>();

const emit = defineEmits(["update:modelValue", "save", "close"]);

const loanForm = reactive<LoanForm>({
  ...props.formData,
});

// 贷款状态类型映射
const statusTypeMap = ["还款中", "已逾期", "已完成"];

// 更新表单数据
watch(
  () => props.formData,
  (newData) => {
    Object.assign(loanForm, newData);
  },
  { immediate: true }
);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

const formRef = ref<FormInstance>();

// 表单验证规则
const rules = reactive<FormRules<LoanForm>>({
  productName: [{ required: true, message: "请输入贷款产品", trigger: "blur" }],
  customerName: [
    { required: true, message: "请输入客户名称", trigger: "blur" },
  ],
  loanAmount: [
    { required: true, message: "请输入贷款金额", trigger: "blur" },
    { type: "number", message: "请输入有效的金额", trigger: "blur" },
    { type: "number", min: 0, message: "贷款金额不能为负数", trigger: "blur" },
  ],
  startTime: [
    { required: true, message: "请选择贷款开始日期", trigger: "change" },
  ],
  endTime: [
    { required: true, message: "请选择贷款结束日期", trigger: "change" },
  ],
  status: [{ required: true, message: "请选择贷款状态", trigger: "change" }],
});

// 关闭弹窗方法
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(loanForm, props.formData);
  emit("close");
};

const submitForm = async () => {
  console.log(loanForm);

  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      emit("save", { ...loanForm });
      ElMessage.success(props.isEdit ? "编辑贷款成功" : "新增贷款成功");
      handleClose();
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped></style>
